<template>
      <div class="container" v-show="show">
      <div class="wraaper">
          <div class="baser">
              <img src="jng.jpg" alt="">
              <button @click="close">取消</button>
          </div>
      </div>
  </div>

</template>

<script>
export default {
    data(){
        return{
            show:false,
            option:{
            confirm:()=>{this.close()}
        }
    }},
  methods:{
    close(){
      this.show = false;
      this.option.confirm();
    }
  }}
</script>

<style>
.container{
    width:100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    position: absolute;
    background-color: rgb(0, 0, 0,0.3);
}
.wraaper{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.baser {
    width: 300px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: blueviolet;
}
.baser img{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 99px;
    }
</style>